<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <br>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏</button>

 </div>
</template>

<!-- setup 语法糖 -->
<script lang="ts" setup name="person">
import { ref } from 'vue'
// 数据
let car = ref({ brand: '奔驰', price: 100 })
console.log(car);
let games = ref([
    { id:'askd01', name:'timi'},
    { id:'askd02', name:'原神'},
    { id:'askd03', name:'lolo'},
  ])

  
// 方法
function changePrice() {
  car.value.price += 10
    console.log(car.value.price);
    
}
function changeFirstGame() {
    games.value[0].name = '下棋'
}


</script>

<style scoped>

    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
    li{
      font-size: 20px;
    }
</style>